<template>
  <el-cascader ref="alarmType_cascaderRef" class="deviceType_select" v-model="deviceTypeId" :props="defaultProps"
    :options="treeList.currentTree" :placeholder="props.needPlaceholder?'报警类型':' '" @change="handleChange" clearable />
</template>
  
<script setup lang="ts">
import { getAlarmTypeList } from "@/http/message";
const props = defineProps({
  needAll: {//是否需要全部选项
    type: Boolean,
    default: false
  },
  selectData: {//选中的值
    type: Array,
    default: [] as any
  },
  needFirst: {//是否需要setup中请求列表
    type: Boolean,
    default: true
  },
  needPlaceholder:{//是否需要placeholder提示
    type: Boolean,
    default: true
  }
})

//指定组件value,label,children对应的属性值
const defaultProps = {
  value: 'id',
  label: 'name',
  children: 'childList',
  expandTrigger:'hover' as const
}


let deviceTypeId: any = ref('');

watch(() => props.selectData, (newValue, oldValue) => {
  // console.log(newValue);
  deviceTypeId.value = newValue

});

interface Tree {
  id: string;
  level: number;
  name: string;
  parentId: string;
  parentPath: string;
  childList?: Tree[]
}

const treeList = reactive({
  tree: [] as Array<Tree>,//系统/类别/类型/设备树形结构
  treeAndAll: [] as Array<Tree>,//系统/类别/类型/设备树形结构(加了一个全部选项)
  currentTree: [] as Array<Tree> //当前所需要的格式(有的需要全部,有的不需要)
})

const emit = defineEmits(['getDeviceTypeId', 'getTreeList', 'getAlarmTypeObj']);

let alarmLevelName = ref('');//报警类型名称

//所属系统/类别/类型/设备改变时
const handleChange = (val: any) => {

  // deviceTypeId.value = val[val.length - 1];
  emit('getDeviceTypeId', val);
  if (val && val.length>0) {
    getAlarmTypeName(treeList.currentTree, val[val.length - 1]);//获取报警类型名称
    emit('getAlarmTypeObj', { alarmTypeId: val[val.length - 1], alarmTypeName: alarmLevelName.value })
  }
  // console.log('67deviceTypeId',deviceTypeId.value);
  
}


//获取报警类型名称
const getAlarmTypeName = (treeList: Array<Tree>, alarmLevelId: string) => {
  treeList.forEach(item => {
    if (item.id == alarmLevelId) {
      alarmLevelName.value = item.name
    } else if (item.childList && item.childList.length > 0) {
      getAlarmTypeName(item.childList, alarmLevelId)
    }
  })
}

//获取列表数据
const getTreeList = () => {
  //如果列表有数据,则不用再获取
  if (treeList.currentTree && treeList.currentTree.length) {
    return;
  }
  getAlarmTypeList().then((res: any) => {
    if (res && res.result && res.result) {
      treeList.tree = res.result;
      treeList.treeAndAll = JSON.parse(JSON.stringify(treeList.tree));
      //筛选条件加上全部,弹窗新增和编辑不需要全部选项
      treeList.treeAndAll.unshift({ id: "0", level: 0, name: "全部", parentId: "", parentPath: "", childList: [] })
      // console.log('tree', treeList.tree);
      emit('getTreeList', treeList);
      if (props.needAll) {
        treeList.currentTree = treeList.treeAndAll;
      } else {
        treeList.currentTree = treeList.tree;
      }
    }
  })
}

if (props.needFirst) {
  getTreeList();
}


const alarmType_cascaderRef = ref<any>("");

//清空
const empty = () => {
  alarmType_cascaderRef.value.cascaderPanelRef.clearCheckedNodes();
  nextTick(() => {
    deviceTypeId.value = "";
  })

}

//获取deviceTypeId初始值
const getEditTypeId = (typeId:string)=>{
  deviceTypeId.value = typeId;
}

//暴露方法,父组件才能调用
defineExpose({ empty, getTreeList,getEditTypeId });
</script>
  
<style lang="scss"></style>
  